{extend name="public/base" /}
{block name="body"}
<div class="page-home row-content layer-cf">
    <!-- 商城统计 -->
    <div class="row">
        <div class="layui-col-md12 layui-col-xs12">
            <div class="widget layui-col-md12 widget-bff">
                <div class="widget-head">
                    <div class="widget-title">商城统计</div>
                </div>
                <div class="widget-body layer-cf">
                    <div class="layui-col-sm12 layui-col-md6 layui-col-lg3 lay-rouw">                 
						<div class="stat-number">
							<div class="volume vol-blue-left">
								<p>商品总量</p>
								<h3>{$data.goods_total}</h3>
							</div>
							<div class="icon-volume vol-blue-right">
								<span class="menu-icon fa fa-gift"></span>
							</div>
						</div>
                    </div>
                    <div class="layui-col-sm12 layui-col-md6 layui-col-lg3 lay-rouw ">                     
						<div class="stat-number">
							<div class="volume vol-purple-left">
								<p>用户总量</p>
								<h3>{$data.user_total}</h3>
							</div>
							<div class="icon-volume vol-purple-right">
                                <span class="menu-icon fa fa-user"></span>
							</div>
						</div>
                    </div>
                    <div class="layui-col-sm12 layui-col-md6 layui-col-lg3 lay-rouw ">                     
						<div class="stat-number">
							<div class="volume vol-green-left">
								<p>订单总量</p>
								<h3>{$data.order_total}</h3>
							</div>
							<div class="icon-volume vol-green-right">
								<span class="menu-icon fa fa-book"></span>
							</div>
						</div>
                    </div>
                    <div class="layui-col-sm12 layui-col-md6 layui-col-lg3 lay-rouw">                   
						<div class="stat-number">
							<div class="volume vol-yellow-left">
								<p>评价总量</p>
								<h3>{$data.comment_total}</h3>
							</div>
							<div class="icon-volume vol-yellow-right">
								<span class="menu-icon fa fa-comments"></span>
							</div>
						</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 实时概况 -->
    <div class="row">
		<div class="layui-col-sm9">
		<!-- 近七日交易走势 -->
			<div class="layui-col-md12 layui-col-xs12" style="padding:0;">
				<div class="widget layer-cf  widget-bff">
					<div class="widget-head">
						<div class="widget-title">近七日交易走势</div>
					</div>
					<div class="widget-body layer-cf">
						<div id="echarts-trade" class="widget-echarts"></div>
					</div>
				</div>
			</div>
		</div>		
		<div class="layui-col-sm2 laui-col-width">
			<div class="widget layer-cf widget-bff">			
				<div class="widget-head">
					<div class="widget-title">实时数据</div>
				</div>
				<div class="layui-col-flex" style="margin-top: 15px">
					<div class="layui-in-list-1">
						<strong>{$data.today_sale_money}</strong>
						<p>销售额</p>
					</div>
					<div class="layui-in-list-1">
						<strong>{$data.yesterday_sale_money}</strong>
						<p>昨日销售额</p>
					</div>
					<div class="layui-in-list-1">
						<strong>{$data.today_order_count}</strong>
						<p>支付订单数</p>
					</div>
					<div class="layui-in-list-1">
						<strong>{$data.yesterday_order_count}</strong>
						<p>昨日支付订单数</p>
					</div>
					<div class="layui-in-list-1">
						<strong>{$data.today_user_count}</strong>
						<p>新增用户数</p>
					</div>
					<div class="layui-in-list-1">
						<strong>{$data.yesterday_user_count}</strong>
						<p>昨日新增用户数</p>
					</div>
					<div class="layui-in-list-1">
						<strong>{$data.today_order_user}</strong>
						<p>下单用户数</p>
					</div>
					<div class="layui-in-list-1">
						<strong>{$data.yesterday_order_user}</strong>
						<p>昨日下单用户数</p>
					</div>
				</div>
			</div>
		</div>
    </div>
</div>
{/block}
{block name="js"}
<script src="/static/admin/js/echarts.min.js"></script>
<script src="/static/admin/js/echarts-walden.js"></script>
<script type="text/javascript">
    /**
     * 近七日交易走势
     * @type {HTMLElement}
     */
    var dom = document.getElementById('echarts-trade');
    echarts.init(dom, 'walden').setOption({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['成交量', '成交额']
        },
        toolbox: {
            show: true,
            showTitle: false,
            feature: {
                mark: {show: true},
                magicType: {show: true, type: ['line', 'bar']}
            }
        },
        calculable: true,
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: {$data.echarts_date|raw}
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '成交额',
                type: 'line',
                data: {$data.echarts_order_total|raw}
            },
            {
                name: '成交量',
                type: 'line',
                data: {$data.echarts_order_count|raw}
            }
        ]
    }, true);
</script>
{/block}